<template>
  <div class="app-container">
    <Header v-if="isHeader"></Header>
    <div class="content-wrapper" :class="{ 'with-header': isHeader }">
      <RouterView></RouterView>
    </div>
    <BottomNav v-if="showBottomNav"></BottomNav>
  </div>
</template>
<script setup>
import { RouterView,useRoute } from 'vue-router';
import Header from './components/Header.vue';
import BottomNav from './components/BottomNav.vue';
import { computed } from 'vue';

const route=useRoute()

const isHeader=computed(()=>{
  return route.name =="main"||route.name=="complaintranking"
  || route.name=="personal"
})

// 控制底部导航显示的路由
const showBottomNav = computed(() => {
  const hiddenRoutes = ['login', 'travel-query','complaintDetail','complaintApplication'] // 不需要显示底部导航的路由
  return !hiddenRoutes.includes(route.name)
})



</script>

<style scoped>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.navbar {
  padding: 1rem 2rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  gap: 1.5rem;
}

.nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.nav-link.active {
  color: #42b983; /* Vue的默认高亮色 */
}

.content {
  flex: 1;
  padding: 2rem;
}

.content-wrapper.with-header {
  padding-top: 60px; /* 与 Header 高度一致 */
}
</style>
